<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";

	request.setAttribute("path", path);
%>

<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'ppp.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript" src="${path}/js/jquery-1.12.3.js"></script>


<!-- 进度条 -->
 <style type="text/css">
	html,
	body,
	div,
	p {
		marrgin: 0;
		padding: 0;
	}
	
	body {
		width: 100%;
		height: 100%;
		background-color: white;
		background-repeat: no-repeat;
	}
	
	#bar {
		height: 4%;
		width: 20%;
		background-color: #F0F0F0;
		border: 1px solid #AAA;
		border-radius: 10px;
		position: absolute;
		top: 46%;
		left: 40%;
	}
	
	#bar .finish {
		height: 100%;
		width: 0%;
		background-color: black;
		border-radius: 5px;
	}
	
	#bar .ing {
		color: black;
		text-align: center;
		font-family: "微软雅黑", Verdana, Geneva, sans-serif
	}
</style>




<style type="text/css">
.window {
	width: 250px;
	height: 300px;
	position: absolute;
	padding: 8px;
	display: none;
	background-color: #0000FF;
}

.content {
	background-color: #FFF;
	height: 280px;
	font-size: 20px;
	overflow: auto;
}

.title {
	font: "微软雅黑";
	font-size: 15px;
	padding: 1px;
}
</style>

<script type="text/javascript">
function upRemove(){
  $("#upwin").hide();
  $("#upname").val("");
   $("#uppassword").val("");
}

	function update() {
		var bbr = "";
		var number="";
		$.each($("input[type='checkbox'][id!=idAll]"), function(k, val) {
			if (val.checked == false) {
				return;
			} else {
				bbr += val.name;
			}
			k="";
		});
		/* alert(bbr); */
		
		if (bbr == "") {
			alert("请至少选择一条修改的对象！");
		}else if (bbr.length > 3) {
			alert("请别多选！");
		} else {

			init();
			var Y = (AllHeight - popHeight) / 2;
			var X = (AllWidth - popWidth) / 2
			$("#upwin").css("top", Y).css("left", X).slideDown("slow");
		 	 var a= $(":checked").parents("tr").children("td[name='n1']").text();
             var b =$(":checked").parents("tr").children("td[name='p1']").text();
             $("#upname").val(a);
             $("#uppassword").val(b); 
             
             /* $("input[type='checkbox']").attr("checked",true); */
		}
	}
	
	
	function upp(){
	var id =$(":checked").parents("tr").children("td[name='id']").text();
	var name =$('#upname').val();
	var password=$('#uppassword').val();
		 window.location.href="${path}/WorkController/update.html?name="+ name+ "&password="+ password+"&id="+id;
		
		}
</script>

<script>
	var AllHeight;
	var AllWidth;
	var popHeight;
	var popWidth;
	/*设置窗口大小*/
	function init() {
		AllHeight = $(window).height();
		AllWidth = $(window).width();
		popHeight = $('.window').height();
		popWidth = $('.window').width();

	}

	function addAdd() {
		var r = confirm("确定添加?")
		if (r == true) {
			$.ajax({
				type : "post",
				dataType : "json",
				url : "${path}/WorkController/add.html",
				data : {

					"name" : $("#addname").val(),
					"password" : $("#addpassword").val()

				},
				success : function(data) {
					var a = data;
					if (a == 1) {
						alert("添加成功");
						$("#select").click();
						$("#addname").val("");
						$("#addpassword").val("");
					} else if (a == 0) {

						alert("用户名密码不能为空");
						$("#select").click();
						$("#addname").val("");
						$("#addpassword").val("");
					} else {
						alert("添加失败");
					}
				},
				error : function(data) {
					alert("fail");
				}

			});
		}
	}
	
	

	function addRemove() {
		$("#addwin").hide();
		$("#addname").val("");
		$("#addpassword").val("");

	}
	function add() {

		init();
		var moveY = (AllHeight - popHeight) / 2;
		var moveX = (AllWidth - popWidth) / 2
		/*alert(""+moveX+" "+moveY)*/
		$("#addwin").css("top", moveY).css("left", moveX).slideToggle("slow");
	}

	$(document)
			.ready(
					function() {
						$("#select")
								.click(
										function() {
											/*     $("#t1").empty();  */
											$
													.ajax({
														type : "post",
														dataType : "json",
														url : "${path}/WorkController/select.html",
														success : function(data) {
															var html = "<tr>"
																	+ "<td><input type='checkbox' name='box' id='idAll' onclick='selectId(this)'/>全选</td>"
																	+ "<td name='id'>id</td>"
																	+ "<td>username</td>"
																	+ "<td>password</td>"
																	+ "</tr>";
															$
																	.each(
																			data,
																			function(
																					index,
																					item) {
																				html += "<tr>"
																						+ "<td><input type='checkbox' name='box' value='"+item.id+"'/></td>"
																						+ "<td name='id'>"
																						+ item.id
																						+ "</td>"
																						+ "<td name='n1'>"
																						+ item.name
																						+ "</td>"
																						+ "<td name='p1'>"
																						+ item.password
																						+ "</td></tr>";

																			});
															$("#t1").empty();
															$(html).appendTo(
																	"#t1");
															/*      $.each(data,function(i,item){
															     var row=$("#t2").clone();
															     row.find("#id").text(data[i].id);
															     row.find("#name").text(data[i].name);
															     row.find("#password").text(data[i].password);
															     row.appendTo("#t1");
															     }); */
															/*          
															        div='<table border="1" width="200px" id="t1">'
															             +'<tr>'
															             +'<td>ID</td>'
															             +'<td>用户名</td>'
															             +'<td>密码</td>'
															             +'</tr>'
															             +'<tr>'
															             +'<td>'
															             +data[index].id
															             +'</td>'
															             +'<td>'
															             +data[index].name
															             +'</td>'
															             +'<td>'
															             +data[index].password
															             +'</td>'
															             +'</tr>';
															         $(div).appendTo("#d1"); */

														},
														error : function(data) {
															alert("查询失败");
														}

													});

										});

					});

	function selectId(a) {
		var selects = "[name='box']:checkbox";
		$(selects).prop("checked", a.checked);
	}

	function del() {
		var str = "";
		$.each($("input[type='checkbox'][id!=idAll]"), function(k, val) {
			if (val.checked == false) {
				return;
			} else {
				str += val.value + ",";
			}
		});
		if (str == "") {
			alert("至少选择一项");
			
			return;
		}
	        var ids=  str.substring(0,str.length-1);
	var r = confirm("确认删除?")
		if (r == true) {
			bar();
			$.ajax({
				type : "post",
				dataType : "json",
				url : "${path}/WorkController/delete.html",
				data : {
					"ids" : ids
				},
				success : function(data) {
				$.each(data,function(k,val){
				alert("已删除用户:"+val.name);
			
				});
					
				$("#select").click();
				},
				error : function(data) {
					alert("删除失败");
				}

			});

		}
	}

	/* 			 function del(){
				var ids = ""; 
				var number =$("input[type='checkbox'][id!=idAll]:checked").length;	
				alert("number:"+number);
			    $.each($("input[type='checkbox'][id!=idAll]"), function(k, v) {
						if (v.checked == false) {
							return;
						} else {
					var id=	 $(this).parents("tr").children().eq(1).text(); 
					  if(number==1){
						  ids = ids  + id;
					  }else{
						  
						  ids =ids + "," + id ;                 
					  }   
					  id="";
					
	     }
					});
					if (ids == "") {
						alert("至少选择一项");
						return;
					} else {
					
					}
			alert(ids);
				} */
</script>

<script type="text/javascript">
function bar(){
			$('#bba').show();
			var i = 0;
		var ms = 5000; //变量MS: 从0%到100%需要的毫秒数
		var time = setInterval(function() {
			$("#bar .finish").css("width", i + "%");
			i = i + (6000 / ms);
			$("#bar .ing").text(Math.round(i) + "%")
			if (i > 100) {
				clearInterval(time);
				$("#bar .ing").text("100%")
				$('#bba').hide();
			}
		}, 10);
			
		}


</script>

<script type="text/javascript">



</script>
</head>

<body>


<div class="window" id="upwin">
		<div class="title">修改界面</div>
		<div class="content">
			<div style="margin-top: 60px;margin-left: 20px;">


				<a style="font-size: 12px;">用户名：</a><input type="text" id="upname" /><br />
				<a style="font-size: 12px;margin-left: 12px;">密码：</a><input
					type="text" style="margin-top: 30px;" id="uppassword" /><br />

			</div>

			<div style="margin-top: 80px;margin-left: 70px;">
				<input type="button" value="修改" onclick="upp()" /> <input
					type="button" value="取消" style="margin-left: 20px;"
					onclick="upRemove()" />
			</div>
		</div>


	</div>



	<div class="window" id="addwin">
		<div class="title">添加界面</div>
		<div class="content">
			<div style="margin-top: 60px;margin-left: 20px;">


				<a style="font-size: 12px;">用户名：</a><input type="text" id="addname" /><br />
				<a style="font-size: 12px;margin-left: 12px;">密码：</a><input
					type="text" style="margin-top: 30px;" id="addpassword" /><br />

			</div>

			<div style="margin-top: 80px;margin-left: 70px;">
				<input type="button" value="添加" onclick="addAdd()" /> <input
					type="button" value="取消" style="margin-left: 20px;"
					onclick="addRemove()" />
			</div>
		</div>


	</div>
	欢迎 ${username}先生
	<br />
	<input type="button" value="查询" id="select">
	<input type="button" value="添加" id="add" onclick="add()">
	<input type="button" value="删除" id="remove" onclick="del()">
	<input type="button" value="修改" id="update" onclick="update()">

	<table border="1" width="200px" id="t1">

		<tr>
			<td><input type="checkbox" name="box" id="idAll"
				onclick="selectId(this)" />全选</td>
			<td name="id">id</td>
			<td>username</td>
			<td>password</td>

		</tr>

	</table>
<!-- 进度条 -->
	<div style="display: none;" id="bba">
	<div id="bar">
<div class="finish"></div>
<p class="ing">0%</p>
</div>
</body>
</html>
